<template>
  <div style="padding: 50px 0 50px 0">
    <a-button
      v-if="CurrU_id == infoDetail.u_id"
      style="float: right; margin-right: 50px"
      shape="circle"
      @click="onclick"
      ><template #icon><FormOutlined /></template
    ></a-button>
    <div style="padding: 0 20% 0 10%">
      <a-form
        :model="infoDetail"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="昵称：">
          <span v-if="editstatu">{{ infoDetail.u_name }}</span>
          <a-input v-else v-model:value="infoDetail.u_name" />
        </a-form-item>
        <a-form-item label="性别：">
          <div v-if="editstatu">
            <span v-if="infoDetail.u_sex == 0">未知</span>
            <span v-if="infoDetail.u_sex == 1">男</span>
            <span v-if="infoDetail.u_sex == 2">女</span>
          </div>
          <a-radio-group
            v-else
            v-model:value="infoDetail.u_sex"
            :options="options"
          />
        </a-form-item>
        <a-form-item label="生日：">
          <span v-if="editstatu">{{ infoDetail.u_birth }}</span>
          <a-date-picker
            v-else
            v-model:value="infoDetail.u_birth"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="个人简介：">
          <span v-if="editstatu">{{ infoDetail.u_mark }}</span>
          <a-input v-else v-model:value="infoDetail.u_mark" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 10, offset: 6 }">
          <a-button v-if="!editstatu" @click="changeInfo">保存修改</a-button>
          <div v-else style="height: 40px"></div>
        </a-form-item>
      </a-form>
      <a-divider />
      <a-form
        v-if="CurrU_id == infoDetail.u_id"
        :label-col="labelCol"
        :model="tel_mail"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="手机号：">
          <span v-if="tel_mail.u_tel != '0'">{{ tel_mail.u_tel }}</span>

          <a-button v-if="tel_mail.u_tel == '0'" @click="addtelwindow"
            >绑定手机</a-button
          >
          <a-button v-else style="float: right" @click="sendtelcode"
            >修改手机</a-button
          >
        </a-form-item>
        <a-form-item label="邮箱：">
          <span v-if="tel_mail.u_mail != '0'">{{ tel_mail.u_mail }}</span>
          <a-button v-if="tel_mail.u_mail == '0'" @click="addmailwindow"
            >绑定邮箱</a-button
          >
          <a-button v-else style="float: right" @click="sendmailcode"
            >修改邮箱</a-button
          >
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 14, offset: 6 }">
          <a-button
            v-if="tel_mail.u_tel != '0'"
            @click="sendtelcode2"
            >手机号修改密码</a-button
          >
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 14, offset: 6 }">
          <a-button
            v-if="tel_mail.u_mail != '0'"
            @click="sendmailcode2"
            >邮箱修改密码</a-button
          >
        </a-form-item>
      </a-form>
    </div>
    <!-- 绑定手机 -->
    <a-modal v-model:visible="visibleaddtel" title="绑定手机" @ok="exaddtel">
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>请输入手机号并验证</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="addtel.tel"
          placeholder="手机号"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="addtel.telcode"
          placeholder="验证码"
          style="width: 60%"
        >
        </a-input>
        <a-button @click="addtelcode" style="width: 38%; margin-left: 2%"
          >获取验证码</a-button
        >
      </a-form-item>
    </a-modal>
    <!-- 绑定邮箱 -->
    <a-modal v-model:visible="visibleaddmail" title="绑定邮箱" @ok="exaddmail">
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>请输入邮箱并验证</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="addmail.mail"
          placeholder="邮箱"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="addmail.mailcode"
          placeholder="验证码"
          style="width: 60%"
        >
        </a-input>
        <a-button @click="addmailcode" style="width: 38%; margin-left: 2%"
          >获取验证码</a-button
        >
      </a-form-item>
    </a-modal>

    <!-- 验证原手机 -->
    <a-modal
      v-model:visible="visible1_1"
      title="修改手机：验证原手机"
      @ok="checktelcode"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>已向手机{{ tel_mail.tel }}发送验证码，请验证：</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newtel.tel_code"
          placeholder="验证码"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
    </a-modal>
    <!-- 新手机 -->
    <a-modal
      v-model:visible="visible1_2"
      title="修改手机：新手机"
      @ok="changetel"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>请输入新手机号并验证</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newtel.tel"
          placeholder="新手机"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newtel.telcode"
          placeholder="验证码"
          style="width: 60%"
        >
        </a-input>
        <a-button @click="gettelcode" style="width: 38%; margin-left: 2%"
          >获取验证码</a-button
        >
      </a-form-item>
    </a-modal>
    <!-- 验证原邮箱 -->
    <a-modal
      v-model:visible="visible2_1"
      title="修改邮箱：验证原邮箱"
      @ok="checkmailcode"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>已向邮箱{{ tel_mail.mail }}发送验证码，请验证：</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newmail.mailcode"
          placeholder="验证码"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
    </a-modal>
    <!-- 新邮箱 -->
    <a-modal
      v-model:visible="visible2_2"
      title="修改邮箱：新邮箱"
      @ok="changemail"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>请输入新邮箱并验证</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newmail.mail"
          placeholder="新邮箱"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newmail.mailcode"
          placeholder="验证码"
          style="width: 60%"
        >
        </a-input>
        <a-button @click="getmailcode" style="width: 38%; margin-left: 2%"
          >获取验证码</a-button
        >
      </a-form-item>
    </a-modal>
    <!-- 验证手机修改密码 -->
    <a-modal
      v-model:visible="visible3_1"
      title="修改密码：验证手机"
      @ok="checktelcode2"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>已向手机{{ tel_mail.tel }}发送验证码，请验证：</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newtel.tel_code"
          placeholder="验证码"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
    </a-modal>
    <!-- 验证邮箱修改密码 -->
    <a-modal
      v-model:visible="visible3_2"
      title="修改密码：验证邮箱"
      @ok="checkmailcode2"
    >
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <span>已向邮箱{{ tel_mail.mail }}发送验证码，请验证：</span>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
        <a-input
          v-model:value="newmail.mailcode"
          placeholder="验证码"
          style="width: 100%"
        >
        </a-input>
      </a-form-item>
    </a-modal>
    <!-- 新密码 -->
    <a-modal
      v-model:visible="visible3_3"
      title="修改密码：新密码"
      @ok="changepw"
    >
      <a-form
        ref="formRef"
        name="custom-validation"
        :model="newpw"
        :rules="rules"
        @finish="handleFinish"
        @validate="handleValidate"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item
          has-feedback
          name="pass"
          :wrapperCol="{ span: 14, offset: 5 }"
        >
          <a-input
            v-model:value="newpw.pass"
            placeholder="新密码"
            type="password"
          />
        </a-form-item>
        <a-form-item
          has-feedback
          name="checkpass"
          :wrapperCol="{ span: 14, offset: 5 }"
        >
          <a-input
            v-model:value="newpw.checkpass"
            placeholder="确认新密码"
            type="password"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { FormOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import { get, post, getBlob, tip, getLocalToken } from "@/common";
import { context } from "ant-design-vue/lib/vc-image/src/PreviewGroup";
const tel_mail = ref({
  u_tel: null,
  u_mail: null,
});
export default defineComponent({
  components: {
    FormOutlined,
  },
  setup() {
    const infoDetail = ref({});

    const CurrU_id = ref();
    const editstatu = ref(true);
    const onclick = () => {
      editstatu.value = !editstatu.value;
    };
    const labelCol = { span: 4 };
    const wrapperCol = { span: 10, offset: 2 };
    const options = [
      {
        label: "未设置",
        value: 0,
      },
      {
        label: "男",
        value: 1,
      },
      {
        label: "女",
        value: 2,
      },
    ];

    const getCurrU_id = () => {
      get("/user/home/curr-user3").then((res) => {
        CurrU_id.value = res.data.u_id;
        getInfo();

        console.log(CurrU_id.value);
      });
    };

    const getInfo = () => {
      let u_id = window.location.search.split("=")[1];
      if (u_id) {
        get("/user/information/userdetail?u_id=" + u_id).then((res) => {
          infoDetail.value = res.data;
          gettel_mail();
        });
      } else {
        get("/user/information/userdetail?u_id=" + CurrU_id.value).then(
          (res) => {
            infoDetail.value = res.data;
            gettel_mail();
          }
        );
      }
    };

    const changeInfo = () => {
      post("/user/information/changeInfo", infoDetail.value).then((res) => {
        editstatu.value = !editstatu.value;
      });
    };
    const visibleaddtel = ref();
    const visibleaddmail = ref();
    const visible1_1 = ref();
    const visible1_2 = ref();
    const visible2_1 = ref();
    const visible2_2 = ref();
    const visible3_1 = ref();
    const visible3_2 = ref();
    const visible3_3 = ref();
    const addtel = ref({
      tel: "",
      telcode: "",
    });
    const addmail = ref({
      mail: "",
      mailcode: "",
    });
    const newmail = ref({
      mail: "",
      mailcode: "",
    });
    const newtel = ref({
      tel: "",
      telcode: "",
    });
    const newpw = ref({
      pass: "",
      checkpass: "",
    });
    const formRef = ref();

    const gettel_mail = () => {
      if (CurrU_id.value == infoDetail.value.u_id) {
        get("/user/information/mytelmail").then((res) => {
          tel_mail.value = res.data;
        });
      } else {
        return;
      }
    };
    const sendmailcode = () => {
      get("user/information/mailcodeForCheck").then((res) => {
        visible2_1.value = true;
      });
    };
    const checkmailcode = () => {
      get(
        "user/information/checkByMail?mailcode=" + newmail.value.mailcode
      ).then((res) => {
        tip.success("验证通过");
        newmail.value.mailcode = "";
        visible2_1.value = false;
        visible2_2.value = true;
      });
    };
    const getmailcode = () => {
      get("user/information/mailcode?mail=" + newmail.value.mail).then(
        (res) => {
          tip.success("已发送验证码！");
        }
      );
    };
    const changemail = () => {
      post("user/information/changemail", newmail.value).then((res) => {
        tip.success("修改成功");
        visible2_2.value = false;
        gettel_mail();
      });
    };

    const addtelwindow = () => {
      visibleaddtel.value = true;
    };
    const addmailwindow = () => {
      visibleaddmail.value = true;
    };
    const addtelcode = () => {
      get("user/information/telcode?tel=" + addtel.value.tel).then((res) => {
        tip.success("已发送验证码！");
      });
    };
    const exaddtel = () => {
      post("user/information/changetel", addtel.value).then((res) => {
        tip.success("绑定成功");
        visibleaddtel.value = false;
      });
    };
    const addmailcode = () => {
      get("user/information/mailcode?mail=" + addmail.value.mail).then(
        (res) => {
          tip.success("已发送验证码！");
        }
      );
    };
    const exaddmail = () => {
      post("user/information/changemail", addmail.value).then((res) => {
        tip.success("绑定成功");
        visibleaddmail.value = false;
      });
    };

    const sendtelcode = () => {
      get("user/information/telcodeForCheck").then((res) => {
        visible1_1.value = true;
      });
    };

    const checktelcode = () => {
      get("user/information/checkBytel?telcode=" + newtel.value.telcode).then(
        (res) => {
          tip.success("验证通过");
          newtel.value.telcode = "";
          visible1_1.value = false;
          visible1_2.value = true;
        }
      );
    };
    const gettelcode = () => {
      get("user/information/telcode?tel=" + newtel.value.tel).then((res) => {
        tip.success("已发送验证码！");
      });
    };

    const changetel = () => {
      post("user/information/changetel", newtel.value).then((res) => {
        tip.success("修改成功");
        visible1_2.value = false;
        gettel_mail();
      });
    };
    const sendtelcode2 = () => {
      get("user/information/telcodeForCheck").then((res) => {
        visible3_1.value = true;
      });
    };
    const checktelcode2 = () => {
      get("user/information/checkBytel?telcode=" + newtel.value.telcode).then(
        (res) => {
          tip.success("验证通过");
          newtel.value.telcode = "";
          visible3_1.value = false;
          visible3_3.value = true;
        }
      );
    };
    const sendmailcode2 = () => {
      get("user/information/mailcodeForCheck").then((res) => {
        visible3_2.value = true;
      });
    };
    const checkmailcode2 = () => {
      get(
        "user/information/checkByMail?mailcode=" + newmail.value.mailcode
      ).then((res) => {
        tip.success("验证通过");
        newmail.value.mailcode = "";
        visible3_2.value = false;
        visible3_3.value = true;
      });
    };

    let validatePass = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("请输入密码");
      } else if (value.length < 8) {
        return Promise.reject("密码位数应不少于8位");
      } else {
        return Promise.resolve();
      }
    };

    let validatePass2 = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("请再次输入密码");
      } else if (value !== newpw.value.pass) {
        return Promise.reject("两次输入密码不一致");
      } else {
        return Promise.resolve();
      }
    };

    const rules = {
      pass: [
        {
          required: true,
          validator: validatePass,
          trigger: "change",
        },
      ],
      checkpass: [
        {
          required: true,
          validator: validatePass2,
          trigger: "change",
        },
      ],
    };

    const changepw = () => {
      formRef.value.validate().then(() => {
        post("/user/information/changePasswd?passwd=" + newpw.value.pass).then(
          (res) => {
            visible3_3.value = false;
          }
        );
      });
    };
    getCurrU_id();

    return {
      visibleaddtel,
      visibleaddmail,
      visible1_1,
      visible1_2,
      visible2_1,
      visible2_2,
      visible3_1,
      visible3_2,
      visible3_3,
      formRef,
      infoDetail,
      tel_mail,
      CurrU_id,
      editstatu,
      onclick,
      labelCol,
      wrapperCol,
      options,
      getCurrU_id,
      getInfo,
      changeInfo,
      gettel_mail,
      newmail,
      sendmailcode,
      checkmailcode,
      getmailcode,
      changemail,
      addtel,
      addmail,
      addtelcode,
      addmailcode,
      exaddtel,
      exaddmail,
      newtel,
      sendtelcode,
      checktelcode,
      gettelcode,
      changetel,
      newpw,
      rules,
      sendmailcode2,
      sendtelcode2,
      checktelcode2,
      checkmailcode2,
      changepw,
      addtelwindow,
      addmailwindow,
    };
  },
});
</script>
<style>
</style>